<template>
	<div>
		<div class="head">
			<a @click="$router.push({path: '/My'})" class="return"></a>
      {{$t('MyTeam.v1')}}
		</div>
		<div class="overlay">
			<div class="overlay-content scrolling">
				<div style="padding: 10px;padding-left: 20px;padding-right: 20px;">
					<div align="center" style="padding-top: 10px;color: #858dac;border-bottom: 1px solid rgba(77, 89, 126, 0.6);padding-bottom: 10px;">
						<van-row style="font-size: 13px;">
							<van-col span="8" style="text-align: left;">{{$t('MyTeam.v2')}}</van-col>
							<van-col span="8" style="text-align: center;">{{$t('MyTeam.v3')}}</van-col>
							<van-col span="8" style="text-align: right;">{{$t('MyTeam.v4')}}</van-col>
						</van-row>
					</div>
					<van-pull-refresh v-model="isLoading" @refresh="onRefresh" pulling-text=" " :loosing-text="$t('MyTeam.v8')" :loading-text="$t('MyTeam.v7')">
						<van-list v-model="loading" :finished="finished" :finished-text="$t('MyTeam.v5')" :loading-text="$t('MyTeam.v7')" @load="onLoad">
							<div align="center" style="padding-top: 10px;" v-for="(item,index) in list" :key="item.index">
								<van-row style="font-size: 12px;color: white;padding-bottom: 10px;">
									<van-col span="8" style="text-align: left;" v-text="item.uuid">{{$t('MyTeam.v2')}}</van-col>
									<van-col span="8" style="text-align: center;" v-text="item.userName">{{$t('MyTeam.v3')}}</van-col>
									<van-col span="8" style="text-align: right;" v-text="item.createTime">{{$t('MyTeam.v4')}}</van-col>
								</van-row>
							</div>
						</van-list>
					</van-pull-refresh>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import { mine } from './../utils/api';
	import { dateFormat } from 'vux';
	export default {
		data() {
			return {
				isLoading: false,
				finished: false,
				loading: false,
				listLength: 0,
				total: 0,
				size: 10,
				current: 1,
				list: [],
			}
		},
		created() {

		},
		mounted() {
			this.getList();
		},
		methods: {
			getList() {
				mine.getMyTeam({
					"current": this.current,
					"size": this.size
				}).then(res => {
					this.list = res.data.records;
					this.listLength = res.data.records.length;
					this.total = res.data.total;
				})
			},
			onRefresh() {
				this.getList();
				setTimeout(() => {
					this.$toast({
						duration: 800,
						message: this.$t('MyTeam.v6')
					});
					this.isLoading = false;
				}, 500);
			},
			onLoad() {
				this.getList();
				setTimeout(() => {
					if(this.total > this.listLength) {
						this.size += 10;
						this.loading = false;
					} else {
						// 加载状态结束
						this.finished = true;
						this.loading = false;
					}
				}, 500);
			}
		},
		filters: {
			dateFormat
		}
	}
</script>

<style lang="less" scoped>
	/deep/ .van-tabs__nav--card {
		margin: 0px 60px;
		border: 0;
	}

	/deep/ .van-tabs__nav--card .van-tab.van-tab--active {
		color: white;
		background-color: rgb(77, 89, 126);
	}

	/deep/ .van-tabs__nav {
		background-color: rgb(33, 38, 57);
	}

	/deep/ .van-tabs__nav--card .van-tab {
		color: rgb(133, 141, 172);
		border-right: 0;
	}
</style>
